<template>
    <div>
        <div v-for="(item, index) in receiveResult" :key="index">
            <div class="search-item-preview">
                <div class="title-preview">{{ item.name_zh }}：</div>
                <template v-if="item.type === 'int'">
                    <a-input v-model:value="receiveResult[index].value" class="a-inp-preview" />
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'string'">
                    <a-input v-model:value="receiveResult[index].value" class="a-inp-preview" />
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>

                <template v-else-if="item.type === 'pem'">
                    <div class="a-inp-preview">
                        <a-upload
                            class="ant-upload-drag"
                            name="file"
                            accept=".pem"
                            :show-upload-list="false"
                            :custom-request="customRequestpem"
                            @change="getNamepem(item.value)"
                        >
                            <a-button type="primary" style="width: 130px" class="file-button">
                                {{ uploadPemFileName || item.value }}
                            </a-button>
                        </a-upload>
                    </div>

                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>

                <template v-else-if="item.type === 'exe'">
                    <div class="a-inp-preview">
                        <a-upload
                            class="ant-upload-drag"
                            name="file"
                            accept=".exe"
                            :show-upload-list="false"
                            :custom-request="customRequestexe"
                            @change="getNameexe(item.value)"
                        >
                            <a-button type="primary" style="width: 130px" class="file-button">
                                {{ uploadExeFileName || item.value }}
                            </a-button>
                        </a-upload>
                    </div>

                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>

                <template v-else-if="item.type === ''">
                    <div class="a-inp-preview">
                        <a-upload
                            class="ant-upload-drag"
                            name="file"
                            :show-upload-list="false"
                            :custom-request="customRequestTxt"
                            @change="getNameTxt(item.value)"
                        >
                            <a-button type="primary" style="width: 130px" class="file-button">
                                {{ uploadDataURLFileName || item.value }}
                            </a-button>
                        </a-upload>
                    </div>

                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>
                <template v-else-if="item.type === 'bool'">
                    <a-select
                        v-model:value="receiveResult[index].value"
                        class="a-inp-preview"
                        placeholder="请选择"
                        allow-clear
                    >
                        <a-select-option value="false">false</a-select-option>
                        <a-select-option value="true">true</a-select-option>
                    </a-select>
                    <div class="exp-anddesc">
                        <a-button type="link" class="desc" @click="setVisible(item)"
                            >查看示例</a-button
                        >

                        <div class="desc">{{ item.desc }}</div>
                    </div>
                </template>

                <template v-else>
                    <div class="imgcontents">
                        <div class="imgself">
                            <a-upload
                                v-model:file-list="fileList"
                                name="avatar"
                                accept="image/*"
                                list-type="picture-card"
                                class="avatar-uploader"
                                :show-upload-list="false"
                                :before-upload="(file) => beforeUpload(file, index)"
                                @change="getValue(item.value)"
                            >
                                <img v-if="imgUrl[index]" :src="imgUrl[index]" alt="Avatar" />
                                <img
                                    v-else-if="item.fileData && item.type !== 'png'"
                                    :src="`data:image/${item.type}+xml;base64,${item.fileData}`"
                                    alt="default"
                                />
                                <img
                                    v-else-if="item.fileData && item.type === 'png'"
                                    :src="`data:image/${item.type};base64,${item.fileData}`"
                                    alt="default"
                                />
                                <div v-else>
                                    <loading-outlined v-if="loading"></loading-outlined>
                                    <plus-outlined v-else></plus-outlined>
                                    <div class="ant-upload-text">upload</div>
                                </div>
                            </a-upload>
                        </div>
                        <div class="exp-anddesc">
                            <a-button type="link" class="desc" @click="setVisible(item)"
                                >查看示例</a-button
                            >

                            <div class="desc">{{ item.desc }}</div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
        <a-image
            v-if="itemData.demoData"
            :width="100"
            :style="{ display: 'none' }"
            :preview="{
                visible,
                onVisibleChange: setVisible,
            }"
            :src="itemData.demoData ? `data:image/png;base64,${itemData.demoData}` : ''"
        >
        </a-image>
    </div>
</template>

<script setup>
import { defineProps, ref, watch } from 'vue';

import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';

import service from '@/service';

const receiveResult = ref([]);

const props = defineProps({
    itemValue: {
        type: Array,
        required: true,
    },

    finalWarpname: {
        type: String,
        required: true,
    },
});
// 上传 pem 文件
const pathname = ref('');
const getNamepem = (valuePath) => {
    pathname.value = valuePath;
};
const uploadPemFileName = ref('');

const customRequestpem = async (file) => {
    const formData = new FormData();

    formData.append(pathname.value, file.file);
    uploadPemFileName.value = file.file.name;

    const res = await service.post(`/warp/upload?resource_name=${warpname2.value}`, formData);

    if (res) {
        message.success('上传pem成功');
    } else {
        message.error('上传pem失败');
    }
};

// 上传 exe 文件
const uploadExeFileName = ref('');

const getNameexe = (valuePath) => {
    pathname.value = valuePath;
};

const customRequestexe = async (file) => {
    const formData = new FormData();

    formData.append(pathname.value, file.file);
    uploadExeFileName.value = file.file.name;

    const res = await service.post(`/warp/upload?resource_name=${warpname2.value}`, formData);

    if (res) {
        message.success('上传exe成功');
    } else {
        message.error('上传exe失败');
    }
};
// 上传 DataURL 文件
const getNameTxt = (valuePath) => {
    pathname.value = valuePath;
};
const uploadDataURLFileName = ref('');

const customRequestTxt = async (file) => {
    const formData = new FormData();

    formData.append(pathname.value, file.file);
    uploadDataURLFileName.value = file.file.name;

    const res = await service.post(`/warp/upload?resource_name=${warpname2.value}`, formData);

    if (res) {
        message.success('上传exe成功');
    } else {
        message.error('上传exe失败');
    }
};

watch(
    () => props.itemValue,
    (newArray) => {
        receiveResult.value = newArray;
    },
    { immediate: true },
);

const warpname2 = ref('');

watch(
    () => props.finalWarpname,
    (newArray) => {
        warpname2.value = newArray;
    },
    { immediate: true },
);

const itemData = ref('');
const visible = ref(false);
const setVisible = (val) => {
    visible.value = true;
    itemData.value = val;
};

// 新建二次弹窗的图片上传部分;

function getBase64(file) {
    return new Promise((resolve, reject) => {
        const render = new FileReader();

        render.onload = () => resolve(render.result);

        render.onerror = (error) => reject(error);
        render.readAsDataURL(file);
    });
}

const fileList = ref([]);
const loading = ref(false);
const imgUrl = ref([]);

// 拿到json文件里的value路径
const path11 = ref('');
const getValue = (valuePath) => {
    path11.value = valuePath;
};
const beforeUpload = (file, index) => {
    const allowUpload = receiveResult.value.map((item) => `image/${item.type}`);

    if (!file.type.includes(allowUpload[index])) {
        message.error('请选择规定类型的图片进行上传');

        return false;
    }

    handleImageUpload(file, index);

    return false;
};

// 获取上传状态
const emit = defineEmits(['send2']);
const handleImageUpload = async (file, index) => {
    try {
        const base64Iamge = await getBase64(file);

        imgUrl.value[index] = base64Iamge;
        emit('send2', imgUrl.value[index]);

        const formData = new FormData();

        formData.append(path11.value, file);

        const res = await service.post(`/warp/upload?resource_name=${warpname2.value}`, formData);

        if (res) {
            message.success('上传成功');
        }

        fileList.value = file.file;
    } catch (error) {
        message.error('上传失败');
    }
};
</script>

<style lang="scss" scoped>
@import '@/styles/uploadpadding.scss';
</style>
